<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: html(~{::title}, ~{::pageStyles}, '预约管理', ~{::#appointments-content}, ~{::pageScripts})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗诊断助手 - 预约管理</title>
    
    <!-- 页面特定CSS -->
    <th:block th:fragment="pageStyles">
        <link rel="stylesheet" th:href="@{/css/pages/appointments.css}">
    </th:block>
</head>
<body>
    <!-- 预约管理内容 -->
    <div id="appointments-content">
        <!-- 操作栏 -->
        <div class="appointments-action-bar">
            <div class="search-filters">
                <div class="filter-group">
                    <label for="dateFilter">日期</label>
                    <input type="date" id="dateFilter" class="form-control">
                </div>
                <div class="filter-group">
                    <label for="statusFilter">状态</label>
                    <select id="statusFilter" class="form-control">
                        <option value="all">全部</option>
                        <option value="pending">待确认</option>
                        <option value="confirmed">已确认</option>
                        <option value="completed">已完成</option>
                        <option value="canceled">已取消</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="departmentFilter">科室</label>
                    <select id="departmentFilter" class="form-control">
                        <option value="all">全部科室</option>
                        <option value="internal">内科</option>
                        <option value="surgery">外科</option>
                        <option value="pediatrics">儿科</option>
                        <option value="gynecology">妇科</option>
                        <option value="neurology">神经科</option>
                        <option value="cardiology">心脏科</option>
                    </select>
                </div>
                <button id="searchBtn" class="btn btn-primary">
                    <span data-icon="search"></span>
                    <span>搜索</span>
                </button>
            </div>
            <div class="action-buttons">
                <button id="newAppointmentBtn" class="btn btn-success">
                    <span data-icon="plus"></span>
                    <span>新建预约</span>
                </button>
                <button id="exportBtn" class="btn btn-outline">
                    <span data-icon="download"></span>
                    <span>导出</span>
                </button>
            </div>
        </div>
        
        <!-- 日历视图 -->
        <div class="appointments-calendar-view">
            <div class="calendar-header">
                <button id="prevWeek" class="btn btn-icon">
                    <span data-icon="chevron-left"></span>
                </button>
                <h2 id="currentWeek">2023年6月12日 - 2023年6月18日</h2>
                <button id="nextWeek" class="btn btn-icon">
                    <span data-icon="chevron-right"></span>
                </button>
                <div class="view-toggle">
                    <button class="view-btn active" data-view="week">周视图</button>
                    <button class="view-btn" data-view="day">日视图</button>
                    <button class="view-btn" data-view="list">列表</button>
                </div>
            </div>
            
            <div class="calendar-container">
                <!-- 时间列 -->
                <div class="calendar-time-column">
                    <div class="time-header"></div>
                    <div class="time-slots">
                        <div class="time-slot">8:00</div>
                        <div class="time-slot">9:00</div>
                        <div class="time-slot">10:00</div>
                        <div class="time-slot">11:00</div>
                        <div class="time-slot">12:00</div>
                        <div class="time-slot">13:00</div>
                        <div class="time-slot">14:00</div>
                        <div class="time-slot">15:00</div>
                        <div class="time-slot">16:00</div>
                        <div class="time-slot">17:00</div>
                    </div>
                </div>
                
                <!-- 星期日 -->
                <div class="calendar-day">
                    <div class="day-header">
                        <span class="day-name">周日</span>
                        <span class="day-date">6月12日</span>
                    </div>
                    <div class="day-slots">
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                    </div>
                </div>
                
                <!-- 星期一 -->
                <div class="calendar-day">
                    <div class="day-header">
                        <span class="day-name">周一</span>
                        <span class="day-date">6月13日</span>
                    </div>
                    <div class="day-slots">
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot">
                            <div class="appointment-item confirmed">
                                <div class="appointment-time">9:00 - 9:30</div>
                                <div class="appointment-patient">张三</div>
                                <div class="appointment-type">首诊 - 内科</div>
                            </div>
                        </div>
                        <div class="appointment-slot">
                            <div class="appointment-item pending">
                                <div class="appointment-time">10:15 - 10:45</div>
                                <div class="appointment-patient">李四</div>
                                <div class="appointment-type">复诊 - 心脏科</div>
                            </div>
                        </div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot">
                            <div class="appointment-item confirmed">
                                <div class="appointment-time">14:30 - 15:00</div>
                                <div class="appointment-patient">王五</div>
                                <div class="appointment-type">检查 - 影像科</div>
                            </div>
                        </div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                    </div>
                </div>
                
                <!-- 星期二 -->
                <div class="calendar-day">
                    <div class="day-header">
                        <span class="day-name">周二</span>
                        <span class="day-date">6月14日</span>
                    </div>
                    <div class="day-slots">
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot">
                            <div class="appointment-item confirmed">
                                <div class="appointment-time">11:00 - 11:30</div>
                                <div class="appointment-patient">赵六</div>
                                <div class="appointment-type">复诊 - 外科</div>
                            </div>
                        </div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot">
                            <div class="appointment-item canceled">
                                <div class="appointment-time">16:00 - 16:30</div>
                                <div class="appointment-patient">钱七</div>
                                <div class="appointment-type">首诊 - 神经科</div>
                            </div>
                        </div>
                        <div class="appointment-slot"></div>
                    </div>
                </div>
                
                <!-- 星期三 -->
                <div class="calendar-day">
                    <div class="day-header">
                        <span class="day-name">周三</span>
                        <span class="day-date">6月15日</span>
                    </div>
                    <div class="day-slots">
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot">
                            <div class="appointment-item confirmed">
                                <div class="appointment-time">10:00 - 10:30</div>
                                <div class="appointment-patient">孙八</div>
                                <div class="appointment-type">首诊 - 儿科</div>
                            </div>
                        </div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                    </div>
                </div>
                
                <!-- 星期四 -->
                <div class="calendar-day">
                    <div class="day-header">
                        <span class="day-name">周四</span>
                        <span class="day-date">6月16日</span>
                    </div>
                    <div class="day-slots">
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot">
                            <div class="appointment-item pending">
                                <div class="appointment-time">13:00 - 13:30</div>
                                <div class="appointment-patient">周九</div>
                                <div class="appointment-type">首诊 - 妇科</div>
                            </div>
                        </div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                    </div>
                </div>
                
                <!-- 星期五 -->
                <div class="calendar-day">
                    <div class="day-header">
                        <span class="day-name">周五</span>
                        <span class="day-date">6月17日</span>
                    </div>
                    <div class="day-slots">
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot">
                            <div class="appointment-item completed">
                                <div class="appointment-time">14:00 - 14:30</div>
                                <div class="appointment-patient">吴十</div>
                                <div class="appointment-type">复诊 - 内科</div>
                            </div>
                        </div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                    </div>
                </div>
                
                <!-- 星期六 -->
                <div class="calendar-day">
                    <div class="day-header">
                        <span class="day-name">周六</span>
                        <span class="day-date">6月18日</span>
                    </div>
                    <div class="day-slots">
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                        <div class="appointment-slot"></div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 列表视图 (初始隐藏) -->
        <div class="appointments-list-view" style="display: none;">
            <table class="appointments-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>患者</th>
                        <th>预约类型</th>
                        <th>科室</th>
                        <th>医生</th>
                        <th>日期时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>AP-1001</td>
                        <td>张三</td>
                        <td>首诊</td>
                        <td>内科</td>
                        <td>刘医生</td>
                        <td>2023-06-13 09:00</td>
                        <td><span class="status-badge confirmed">已确认</span></td>
                        <td>
                            <button class="btn-icon btn-view" title="查看详情"><span data-icon="eye"></span></button>
                            <button class="btn-icon btn-edit" title="编辑"><span data-icon="edit"></span></button>
                            <button class="btn-icon btn-cancel" title="取消"><span data-icon="delete"></span></button>
                        </td>
                    </tr>
                    <tr>
                        <td>AP-1002</td>
                        <td>李四</td>
                        <td>复诊</td>
                        <td>心脏科</td>
                        <td>王医生</td>
                        <td>2023-06-13 10:15</td>
                        <td><span class="status-badge pending">待确认</span></td>
                        <td>
                            <button class="btn-icon btn-view" title="查看详情"><span data-icon="eye"></span></button>
                            <button class="btn-icon btn-edit" title="编辑"><span data-icon="edit"></span></button>
                            <button class="btn-icon btn-cancel" title="取消"><span data-icon="delete"></span></button>
                        </td>
                    </tr>
                    <tr>
                        <td>AP-1003</td>
                        <td>王五</td>
                        <td>检查</td>
                        <td>影像科</td>
                        <td>张医生</td>
                        <td>2023-06-13 14:30</td>
                        <td><span class="status-badge confirmed">已确认</span></td>
                        <td>
                            <button class="btn-icon btn-view" title="查看详情"><span data-icon="eye"></span></button>
                            <button class="btn-icon btn-edit" title="编辑"><span data-icon="edit"></span></button>
                            <button class="btn-icon btn-cancel" title="取消"><span data-icon="delete"></span></button>
                        </td>
                    </tr>
                    <tr>
                        <td>AP-1004</td>
                        <td>赵六</td>
                        <td>复诊</td>
                        <td>外科</td>
                        <td>李医生</td>
                        <td>2023-06-14 11:00</td>
                        <td><span class="status-badge confirmed">已确认</span></td>
                        <td>
                            <button class="btn-icon btn-view" title="查看详情"><span data-icon="eye"></span></button>
                            <button class="btn-icon btn-edit" title="编辑"><span data-icon="edit"></span></button>
                            <button class="btn-icon btn-cancel" title="取消"><span data-icon="delete"></span></button>
                        </td>
                    </tr>
                    <tr>
                        <td>AP-1005</td>
                        <td>钱七</td>
                        <td>首诊</td>
                        <td>神经科</td>
                        <td>赵医生</td>
                        <td>2023-06-14 16:00</td>
                        <td><span class="status-badge canceled">已取消</span></td>
                        <td>
                            <button class="btn-icon btn-view" title="查看详情"><span data-icon="eye"></span></button>
                            <button class="btn-icon btn-edit" title="编辑" disabled><span data-icon="edit"></span></button>
                            <button class="btn-icon btn-cancel" title="取消" disabled><span data-icon="delete"></span></button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="pagination">
                <button class="page-btn prev" disabled><span data-icon="chevron-left"></span></button>
                <div class="page-numbers">
                    <button class="page-number active">1</button>
                    <button class="page-number">2</button>
                    <button class="page-number">3</button>
                    <span>...</span>
                    <button class="page-number">10</button>
                </div>
                <button class="page-btn next"><span data-icon="chevron-right"></span></button>
            </div>
        </div>
        
        <!-- 预约详情模态框 -->
        <div id="appointmentModal" class="modal" style="display: none;">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>预约详情</h2>
                    <button class="modal-close">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="appointmentForm">
                        <div class="form-section">
                            <h3 class="section-title">基本信息</h3>
                            <div class="form-group">
                                <label for="patientName">患者姓名</label>
                                <input type="text" id="patientName" class="form-control" placeholder="请输入患者姓名">
                            </div>
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label for="appointmentType">预约类型</label>
                                    <select id="appointmentType" class="form-control">
                                        <option value="first">首诊</option>
                                        <option value="follow">复诊</option>
                                        <option value="check">检查</option>
                                        <option value="consultation">咨询</option>
                                    </select>
                                </div>
                                <div class="form-group col-6">
                                    <label for="appointmentDepartment">科室</label>
                                    <select id="appointmentDepartment" class="form-control">
                                        <option value="internal">内科</option>
                                        <option value="surgery">外科</option>
                                        <option value="pediatrics">儿科</option>
                                        <option value="gynecology">妇科</option>
                                        <option value="neurology">神经科</option>
                                        <option value="cardiology">心脏科</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-section">
                            <h3 class="section-title">安排信息</h3>
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label for="appointmentDoctor">医生</label>
                                    <select id="appointmentDoctor" class="form-control">
                                        <option value="doctor1">刘医生</option>
                                        <option value="doctor2">王医生</option>
                                        <option value="doctor3">张医生</option>
                                        <option value="doctor4">李医生</option>
                                        <option value="doctor5">赵医生</option>
                                    </select>
                                </div>
                                <div class="form-group col-6">
                                    <label for="appointmentStatus">状态</label>
                                    <select id="appointmentStatus" class="form-control">
                                        <option value="pending">待确认</option>
                                        <option value="confirmed">已确认</option>
                                        <option value="completed">已完成</option>
                                        <option value="canceled">已取消</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label for="appointmentDate">日期</label>
                                    <input type="date" id="appointmentDate" class="form-control">
                                </div>
                                <div class="form-group col-6">
                                    <label for="appointmentTime">时间</label>
                                    <input type="time" id="appointmentTime" class="form-control">
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-section">
                            <h3 class="section-title">其他信息</h3>
                            <div class="form-group">
                                <label for="appointmentNotes">备注</label>
                                <textarea id="appointmentNotes" class="form-control" rows="3" placeholder="请输入预约备注信息"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-outline" data-dismiss="modal">取消</button>
                    <button class="btn btn-primary" id="saveAppointment">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面特定脚本 -->
    <th:block th:fragment="pageScripts">
        <script th:src="@{/js/pages/appointments.js}"></script>
    </th:block>
</body>
</html> 